<!doctype html>
<head>
    <title>Batavia testbed</title>

    <!-- A native module to use for testing imports -->
    <script src="/static/native.js"></script>
    <!--
        To run this demo:

        * Add Django 1.8 to your virtual environment
        * Start the testserver::

            ./manage.py runserver

        * Load http://127.0.0.1:8000 in your browser
        * Click one of the buttons.

        This will run the test code, and display stdout/stderr
        on the visible page.
      -->

    <!--These three are from CodeMirror, - https://codemirror.net/ - for adding syntax highlighting to text area -->
    <script src="/static/CodeMirror/lib/codemirror.js"></script>
    <script src="/static/CodeMirror/mode/python/python.js"></script>
    <link rel=stylesheet href="/static/CodeMirror/lib/codemirror.css">

    <!--Main styles for this site-->
    <link rel=stylesheet href="/static/styles/styles.css">
    <link rel="shortcut icon" href="/static/styles/favicon.png">

    <!--Adding Font Awesome to give some zest to headings etc -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

    <script src="/static/batavia.js"></script>

    <!-- The following <script> tag contains a Base64 encoded PYC file.
         The file encoded is the entire test.pystone module. The naming
         of the ID is significant - it's a naming convention that
         allows the Python `import` statement to find other modules. -->
    <script 
        id="batavia-test.pystone" 
        type="application/python-bytecode"
        data-filename="{{ modules.pystone.filename }}">
{{ modules.pystone.compiled }}
    </script>

    <!-- This is a simple test script. The content comes from sample.py
         in the testserver directory -->
    <script
        id="batavia-sample"
        type="application/python-bytecode"
        data-filename="{{ modules.sample.filename }}">
{{ modules.sample.compiled }}
    </script>

    <!-- This is a second module module that can be imported. The content
         comes from other.py in the testserver directory -->
    <script id="batavia-other"
        type="application/python-bytecode"
        data-filename="{{ modules.sample.filename }}">
{{ modules.other.compiled }}
    </script>

    <script id="batavia-submodule"
        type="application/python-bytecode"
        data-filename="{{ modules.submodule.init.filename }}">
{{ modules.submodule.init.compiled }}
    </script>

    <script id="batavia-submodule.modulea"
        type="application/python-bytecode"
        data-filename="{{ modules.submodule.modulea.filename }}">
{{ modules.submodule.modulea.compiled }}
    </script>

    <script id="batavia-submodule.moduleb"
        type="application/python-bytecode"
        data-filename="{{ modules.submodule.moduleb.filename }}">
{{ modules.submodule.moduleb.compiled }}
    </script>

    <script id="batavia-submodule.modulec"
        type="application/python-bytecode"
        data-filename="{{ modules.submodule.modulec.filename }}">
{{ modules.submodule.modulec.compiled }}
    </script>

    <script id="batavia-submodule.moduled"
        type="application/python-bytecode"
        data-filename="{{ modules.submodule.moduled.init.filename }}">
{{ modules.submodule.moduled.init.compiled }}
    </script>

    <script id="batavia-submodule.moduled.submoduled"
        type="application/python-bytecode"
        data-filename="{{ modules.submodule.moduled.submoduled.filename }}">
{{ modules.submodule.moduled.submoduled.compiled }}
    </script>

    <script id="batavia-submodule.subsubmodule"
        type="application/python-bytecode"
        data-filename="{{ modules.submodule.subsubmodule.init.filename }}">
{{ modules.submodule.subsubmodule.init.compiled }}
    </script>

    <script id="batavia-submodule.subsubmodule.submodulea"
        type="application/python-bytecode"
        data-filename="{{ modules.submodule.subsubmodule.submodulea.filename }}">
{{ modules.submodule.subsubmodule.submodulea.compiled }}
    </script>

    {% if customcode and customcode.compiled %}
    <script id="batavia-customcode"
        type="application/python-bytecode"
        data-filename="{{ modules.custom.filename }}">
{{ customcode.compiled }}
    </script>
    {% endif %}

    <script>

// Now define a stdout and stderr function that will output to the page.
function PyConsole(element) {
    this.element = document.getElementById('pyconsole');
}

PyConsole.prototype.write = function(buffer) {
    var text = document.createTextNode(buffer);
    this.element.appendChild(text);

    // Also echo to the console.
    console.log(buffer)
}

PyConsole.prototype.flush = function() {}

function PyErrConsole(element) {
    this.element = document.getElementById('pyconsole');
}

PyErrConsole.prototype.write = function(buffer) {
    var err = document.createElement('span');
    err.className = "error";
    var text = document.createTextNode(buffer)

    err.appendChild(text)
    this.element.appendChild(err);

    // Also echo to the console.
    console.log(buffer)
}

PyErrConsole.prototype.flush = function() {}

function bootstrap() {
    console.log('Create VM');
    window.vm = new batavia.VirtualMachine({
        stdout: new PyConsole(),
        stderr: new PyErrConsole(),
        frame: null
    });
{% if customcode %}
    console.log('Run code...');
    vm.run('customcode', []);
    console.log('done.');
{% endif %}
}

function sample() {
    console.log('Run code...');
    // The first argument is the Python dotted-path of the module to run
    // The second argument is the value for sys.argv
    window.vm.run('sample', ['5']);
    console.log('done.');
}

function pystone(loops) {
    console.log('Benchmarking...');
    window.vm.run('test.pystone', [loops]);
    console.log('done.');
}
    </script>

</head>
<body onload="bootstrap();">
    <h1>Batavia testbed</h1>
    <h3>Try running some Python in the browser</h3>
    <div class="indent_block">
        {% if customcode and customcode.error %}
        <div class='warning important'><pre>{{ customcode.error }}</pre></div>
        {% endif %}
        <form method="post">
            <textarea id="text_editor" cols="80" rows="8" name="code">{{ customcode.code }}</textarea>
            <p class="warning important">
                <b>NOTE - This is not sandboxed!!</b> This code will be compiled on the webserver, with the same permissions as the user running the web server. There may be vectors for arbitrary code execution. <b>You have been warned!</b>
            </p>
            <input type="submit" value="Run your code!" />
        </form>
    </div>
    <hr/>
    <h3>Or run some of our Python scripts</h3>
    <div class="indent_block">
        <button onclick="sample()">Run sample.py</button>
        <button onclick="pystone('5')">Run PyStone (5 loops)</button>
        <button onclick="pystone('500')">Run PyStone (500 loops)</button>
        <button onclick="pystone('50000')">Run PyStone (50000 loops)</button><br />
        <p class="warning">
            NOTE - Run Sample.py will open a new page; that's intended. The Run PyStone (50000 loops) example will take some time to complete without immediate feedback.
        </p>
    </div>
    <hr/>
    <script>
        var myTextEditor = document.getElementById('text_editor');
        var myCodeMirror = CodeMirror.fromTextArea(myTextEditor, {
            indentUnit: 4, //Python is four spaces indented
            smartIndent: true, //Detects blocks, places code four spaces indented
            lineWrapping: true, //Otherwise you'd need to scroll right
            lineNumbers: true
        });
    </script>
    <h3>Console output</h3>
    <div class="indent_block">
        <pre id="pyconsole"></pre>
    </div>
    <hr/>
    <h3>More about Batavia</h3>
    <div class="indent_block">
        <p>Batavia, and the larger <a href="http://pybee.org/" target="_blank">BeeWare project</a>, is open source and welcomes contributions!</p>
    </div>
</body>
</html>
